<template>
  <div class="container">
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- 搜索输入框 -->
    <van-search v-model.trim="searchText" placeholder="请输入搜索关键词" @search="onSearch(searchText)" />
    <van-cell-group v-if="suggestionList.length>0">
      <!-- 联想关键字内容展示列表 -->
      <van-cell icon="search" v-for="(item,k) in suggestionList" :key="k" @click="onSearch(item)">
        <!-- 所以不要直接使用title属性，相反要应用命名插槽，内部结合v-html应用 -->
        <div slot="title" v-html="highLightCell(item,searchText)"></div>
      </van-cell>
    </van-cell-group>
    <van-cell-group v-else>
      <van-cell title="历史记录">
        <van-icon
          name="delete"
          @click="isDeleteData=true"
          v-show="!isDeleteData"
          slot="right-icon"
          style="line-height:inherit"
        ></van-icon>
        <!-- 命名插槽 -->
        <div v-show="isDeleteData" slot="default">
          <span style="margin-right:10px" @click="suggestDelAll">全部删除</span>
          <span @click="isDeleteData=false">完成</span>
        </div>
      </van-cell>
      <!-- 历史联想项目数据展示 -->
      <van-cell :title="item" v-for="(item,k) in suggestHistories" :key="k">
        <!-- 删除按钮 -->
        <van-icon
          v-show="isDeleteData"
          slot="right-icon"
          name="close"
          style="line-height:inherit"
          @click="suggestDel(k)"
        ></van-icon>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
// 获得联想建议数据api
import { apiSearchSuggestion } from "@/api/search.js";
// 创建常量，配置历史关键字的key名称，方便后续开发
const SH = "suggest-histories";
export default {
  name: "search-index",
  watch: {
    // searchText进行监听
    searchText: function(newV) {
      clearTimeout(this.timer);
      // 用户没有输入信息不要联系
      if (!newV) {
        this.suggestionList = [];
        return false;
      }
      this.timer = setTimeout(async () => {
        // 正常联想
        const result = await apiSearchSuggestion(newV);
        this.suggestionList = result.options;
      }, 1000);
    }
  },
  data() {
    return {
      // 从localStorage获取已经存储好的关键字信息
      suggestHistories: JSON.parse(localStorage.getItem(SH) || "[]"),
      // 联想历史记录是否进入删除状态,true删除状态[全部删除、完成、叉号]，false正常状态[垃圾桶]
      isDeleteData: false, // 联想建议数据列表
      suggestionList: [], // 联想建议数据列表
      searchText: "" // 用户输入的搜索关键字
    };
  },
  methods: {
    // 删除全部关键字项目
    suggestDelAll () {
      // 页面级，响应式效果
      this.suggestHistories = []
      // 持久级localStorage
      localStorage.removeItem(SH)
    },
    // 删除单个关键字项目
    // index: 被删除项目在列表数组中的下标
    suggestDel (index) {
      // 页面级，响应式效果
      this.suggestHistories.splice(index, 1)
      // 持久级localStorage
      localStorage.setItem(SH, JSON.stringify(this.suggestHistories))
    },
    // 根据关键字要跳转执行
    onSearch(kw) {
      // 可以统一对kw关键字做收集存储工作
      if (!kw) {
        // 没有输入任何关键字，禁止文章搜索
        return false;
      }
      // 把当前的kw关键字存储起来，还要考虑去除重复
      // 把现在的关键字转为Set结合
      const st = new Set(this.suggestHistories);
      // 对set做添加操作(自动去重)
      st.add(kw);
      // 对添加好的关键字集合转换为Array数组,并赋予给suggestHistories的data成员
      // 有响应式效果
      this.suggestHistories = Array.from(st);
      // localStorage维护目前最新的关键字数组
      localStorage.setItem(SH, JSON.stringify(this.suggestHistories));
      this.$router.push("/search/result/" + kw);
    },

    // 关键字高亮设置
    highLightCell(content, keywords) {
      // 创建正则
      const reg = new RegExp(keywords, "i");
      // 正则与目标内容进行匹配
      const rst = content.match(reg);
      if (rst === null) {
        return content;
      }
      return content.replace(reg, `<span style="color:red;">${rst[0]}</span>`);
    }
  }
};
</script>

<style scoped lang='less'></style>